<script lang='ts' setup>
import { reactive, ref } from 'vue' 
import type { FormInstance, FormRules } from 'element-plus' 
import type { Tree } from './AddInformation.vue'


const state = reactive({
    name: '',
    parentCategory: [
        { label: '茶饮系列', value: 1},
        { label: '面部家居', value: 2},
        { label: '眼部家居', value: 3},
    ],
    treeData: [
        {
            id: 2,
            label: 'Level one 2',
            pid: 0,
            value: 2,
            children: [
                {
                    id: 5,
                    label: 'Level two 2-1',
                    pid: 2,
                    value: 8,
                },
                {
                    id: 6,
                    label: 'Level two 2-2',
                    pid: 2,
                    value: 6,
                },
            ],
        },
        {
            id: 3,
            label: 'Level one 3',
            pid: 0,
            value: 3,
            children: [
                {
                    id: 7,
                    label: 'Level two 3-1',
                    pid: 3,
                    value: 99,
                },
                {
                    id: 8,
                    label: 'Level two 3-2',
                    pid: 3,
                    value: 8,
                },
            ],
        },
    ] as Array<Tree>
})
const ruleFormRef = ref<FormInstance>()


const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false
})

const emit = defineEmits(['update:modelValue', 'confirmCategory'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const ruleForm = reactive({ 
	parent: '' as string | Array<number>,
	name: '' as string | number,
	sort: 1, 
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }], 
	parent: [{ required: true, message: '请选择分类名称', trigger: 'blur' }], 
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			emit('confirmCategory', {name: ruleForm.name, id: ruleForm.parent})
            closeDialog()
		} else {
			//console.log('error submit!', fields)
		}
	})
}

const handleChange = (e: any) => {
    //console.log(e);
    
}

const setInitData = (name: string | number, id: Array<number>) => {
    ruleForm.name = name
    ruleForm.parent = id
}

defineExpose({ setInitData })
</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="新增商品分类" center @close="closeDialog" style="width: 600px;">
            <section>
               
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			     status-icon>
                    <el-form-item label="上级分类" prop="parent">
                        <!-- <el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入分类名称" /> -->
                        <el-cascader placeholder="请选择分类名称" style="width: 100%;" :prpos="{value: 'id', label: 'label'}" v-model="ruleForm.parent" :options="state.treeData" @change="handleChange" />
                    </el-form-item>
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入分类名称" />
                    </el-form-item>
                    <!-- <el-form-item label="排序" >
                        <el-input-number v-model="ruleForm.sort" :min="1" />
                    </el-form-item> -->
                </el-form>
                <el-row justify="center" class="mt20">
                    <el-button  @click="closeDialog">取消</el-button>
                    <el-button type="primary"  @click="submitForm(ruleFormRef)">确定</el-button>
                </el-row>
            </section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.goods-img-list{
    display: flex;
    flex-wrap: wrap;
    .goods-img-item{
        text-align: center;
        margin-right: 20px;
        margin-bottom: 20px;
        border: 1px solid #fff;
        .goods-img-name{
            font-size: 13px;
            margin-top: 4px;
        }
       
    }
    .goods-img{
        width: 90px;
        height: 90px; 
        object-fit: cover; 
        border-radius: 6px;
        border: 2px solid #ffffff;
        cursor: pointer;
        &:hover {
            border: 2px solid #e75c5c;
        }
    }
    .active-img {
        border: 2px solid #e75c5c;
    }
}
</style>